<template>
  <a-modal
    :width="1000"
    v-model:visible="modalVisible"
    @ok="handleOk"
    :mask-closable="false"
    @cancel="modalVisible = false"
  >
    <template #title> {{ props.title }}</template>
    <div>
      <a-form ref="formRefs" :model="form" auto-label-width>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="number" label="货架编码：">
              <a-input v-model="form.number" placeholder="请输入货架编码..." />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="name" label="货架名称:">
              <a-input v-model="form.name" placeholder="请输入货架名称..." />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item
              field="warehouseType"
              label="货架规格："
              extra="默认单位为M！"
            >
              <a-space>
                <a-input-number
                  :min="1"
                  v-model="form.long"
                  :hide-button="true"
                  allow-clear
                >
                  <template #append> 长 </template>
                </a-input-number>
                <a-input-number
                  :min="1"
                  v-model="form.wide"
                  :hide-button="true"
                  allow-clear
                >
                  <template #append> 宽 </template>
                </a-input-number>
                <a-input-number
                  :min="1"
                  v-model="form.high"
                  :hide-button="true"
                  allow-clear
                >
                  <template #append> 高 </template>
                </a-input-number>
              </a-space>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="number" label="库区属性：">
              <a-input
                v-model="form.attribute"
                :hide-button="true"
                placeholder="请输入库区属性"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="warehouseType" label="库区类型：">
              <a-select v-model="form.warehouseType">
                <a-option
                  v-for="item in classificationData"
                  :key="item.id"
                  :value="item.id"
                  >{{ item.name }}</a-option
                >
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="12">
            <a-form-item field="name" label="货架格数：">
              <a-input-number
                :min="1"
                v-model="form.lattice"
                :hide-button="true"
                placeholder="请输入货架格数..."
              />
            </a-form-item>
          </a-col> </a-row
        ><a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="number" label="货架层数：">
              <a-input-number
                :min="1"
                v-model="form.tier"
                :hide-button="true"
                placeholder="请输入货架层数..."
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="name" label="最大称重量：">
              <a-input-number
                :min="1"
                v-model="form.weight"
                :hide-button="true"
                placeholder="请输入最大称重量..."
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="number" label="启用状态：">
              <a-switch
                v-model="form.state"
                :checked-value="1"
                :unchecked-value="2"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="number" label="所在位置：">
              <a-textarea
                v-model="form.location"
                placeholder="请输入所在位置..."
                allow-clear
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="number" label="备注：">
              <a-textarea
                v-model="form.remark"
                placeholder="请输入备注..."
                allow-clear
              />
            </a-form-item>
          </a-col>
        </a-row> </a-form
    ></div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { cloneDeep } from 'lodash';
  import { reactive, computed, watchEffect, onMounted, ref, watch } from 'vue';
  import {
    GetUnitList,
    PostUnit,
  } from '@/api/inventory-management/material-management/index';
  import { getWarehouseType } from '@/api/inventory-management/warehouse-management/warehouse-list/index';
  import { GetPersonnelinformation } from '@/api/home/System settings/personal-information/index';
  // 获取人员信息数据
  const PersonnelData = ref();
  const Getuserlist = async () => {
    try {
      const res = await GetPersonnelinformation({
        page: 10,
        size: -1,
      });

      PersonnelData.value = res.content.data;
    } catch (err: unknown) {
      console.log(err);
    }
  };
  Getuserlist();
  const getUnitData = ref();
  const getUnitList = async () => {
    const res = await GetUnitList({ page: 1, size: -1, type: 1 });
    getUnitData.value = res.content;
  };

  getUnitList();
  const formRefs = ref();
  const props = withDefaults(
    defineProps<{
      visible: boolean;
      createId: number;
      formData: any;
      title: string;
      state: number;
    }>(),
    {
      visible: false,
    }
  );

  // 获取产品分类
  const fieldNames = { value: 'id', label: 'name' };
  const classificationData = ref();
  const ClassificationList = async () => {
    const res = await getWarehouseType({ page: 10, size: -1, type: 2 });
    classificationData.value = res.content;
  };
  ClassificationList();

  let form = ref({
    id: undefined,
    pid: undefined,
    name: '',
    number: '',
    long: undefined,
    wide: undefined,
    high: undefined,
    lattice: undefined,
    tier: undefined,
    weight: undefined,
    warehouseType: undefined,
    location: '',
    attribute: '',
    remark: '',
    state: 1,
    mark: 2,
  });

  const emit = defineEmits(['update:visible', 'addShelfForm']);

  const handleOk = () => {
    if (props.title === '新增货架') {
      emit('addShelfForm', form.value, 'add');
    } else {
      emit('addShelfForm', form.value, 'edit');
    }
  };

  // 判断用户是否显示弹出框
  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    },
  });

  watchEffect(() => {
    if (modalVisible.value) {
      form.value = cloneDeep(props.formData);
      if (props.createId) {
        form.value.pid = props.createId;
      }
    }
  });
</script>

<style scoped lang="less"></style>
